<template>
  <div>
    <h3>根组件</h3>
    <!--
      总结：
        a. 在routes数组中声明的第一层路由对象，只能在 App.vue 中使用 router-view展示
        b. 通过 router-link 可以让组件进行切换，但是要配合 to 属性写入路径
        c. router-link 最终会解析为一个 a 标签，vue会监听其哈希值发生组件切换
        d. 当组件切换时，router-link 会自动提供一些类名，可以用于高亮
            / 根路径会保持默认一个  .router-link-active  建议使用长的
     -->

    <hr />
    <!-- vue-router 还提供了一个专门用于切换的标签 router-link -->
    <!-- router-link 标签的 to 属性用于声明路径 -->
    <p>
      <router-link to="/page1">tab1</router-link>
      <!-- 浏览器地址栏的url以 # 号开头的都是哈希值  -->
      <!-- <a href="#/">Tab1</a> -->
      <router-link to="/page2">tab2</router-link>
    </p>

    <!-- 显示对应的路由组件 - vue-router 中有专门的显示标签 -->
    <router-view></router-view>
  </div>
</template>

<style lang="less" scoped>
button {
  padding: 6px 20px;
  margin: 10px 15px;
}

p {
  padding: 20px;

  a {
    margin: 0 10px;
  }
}

.router-link-exact-active {
  color: #f40;
}
</style>
